<template>
	<view class="content ">
		<image class="bg" src="../../static/images/bg.png"></image>
		<view class="home u-skeleton">
			<view class="u-flex u-row-between u-col-top home_top">
				<!-- 已经生产的蛋 -->
				<view class="">
					<!-- -->
					<view class="egg_box u-skeleton-fillet" @click="showDeliverCenter">
						<image src="../../static/images/box.png" mode="widthFix"></image>
						<u-badge size="small" type="error" :count="eggNum" is-center="true"></u-badge>
						<view class="egg_item" v-for="index in eggNum>10?10:eggNum" :style="{ top: eggImg[index].top, left: eggImg[index].left }"
						 :key="index">
							<image src="../../static/images/egg.png" mode="widthFix" class="egg"></image>
						</view>
						<darke-cartsBall ref="cartsBall" :endPos="{x: 28, y:100}" :ballImage="'url('+require('@/static/images/egg.png')+')'"></darke-cartsBall>
					</view>
					<view class="buy_image u-skeleton-rect">
						<navigator url="../../buychicken/index/index" hover-class="none" class="buy_image">
							<image src="../../static/images/chick4.png" mode=""></image>
						</navigator>
					</view>
				</view>
				<!-- 活动说明，配送中心，分享 -->
				<view class="">
					<view class="top_tabs u-skeleton-circle" @click="showSendGroupModal" v-if="vuex_token !==''">
						<!--  @click="showChickenMadal" -->
						<image src="../../static/images/icon_explain.png" mode="widthFix"></image>
					</view>
					<view class="top_tabs u-skeleton-circle">
						<image src="../../static/images/icon_dilivery.png" mode="widthFix" @click="showDeliverCenter"></image>
					</view>
					<view class="top_tabs u-skeleton-circle">
						<u-button :custom-style="{padding:'0',width:'100%',height:'100%',borderRadius: '50%',backgroundColor:'rgba(0,0,0,0)'}"
						 open-type="share" hover-class="none">
							<image src="../../static/images/icon_share.png" mode="widthFix"></image>
						</u-button>
					</view>
					<view class="top_tabs u-skeleton-circle" @click="popup_show = true">
						<image src="../../static/images/icon_share2.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 鸡 -->
			<view class="chicken">
				<view class="chicken-item animated" v-for="(item, index) in chickenImg" :key="index" :style="{ width: item.width }" :class="[item.isTrans ? 'tans-180' : '', index === 3 ? '' : '', 'chicken-item-position-' + (index + 1)]"
				 @click="Charge($event,index)">
					<image :src="item.url" mode="widthFix" style="width: 100%;"></image>
					<view class="progress-parnt" v-if="item.isProgress">
						<u-line-progress active-color="#F75F53" :percent="henProgress" :round="true" striped striped-active :height="6"
						 :show-percent="false"></u-line-progress>
					</view>
					<view class="hand" v-if="index === 5 && item.isProgress=='100'">
						<image src="../../static/images/icon_finger.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 饲料提示 -->
			<view class="tips u-flex u-flex-col u-col-center u-row-center u-skeleton-rect" @click="navigatorToPages" data-url="../../farm/feelog/feelog">
				<view class="">剩余{{feed}}kg</view>
				<view class="">
					饲料预计可喂食
					<text>{{feed_surplus_day}}</text>
					天
				</view>
			</view>
			<!-- 底部tabs -->
			<view class="bottom-tabs u-flex u-col-center u-row-around">
				<view class="bottom-tabs-item u-skeleton-circle">
					<navigator url="../../buychicken/index/index">
						<image src="../../static/images/icon_zhul.png" mode="widthFix"></image>
					</navigator>
				</view>
				<view class="bottom-tabs-item u-skeleton-circle">
					<image src="../../static/images/icon_act.png" mode="widthFix" @click="showReceiveCenterMadal"></image>
				</view>
				<view class="bottom-tabs-item u-skeleton-circle">
					<navigator hover-class="none" url="../../friend/friend/friend">
						<image src="../../static/images/icon_friend.png" mode="widthFix"></image>
					</navigator>
				</view>
				<view class="bottom-tabs-item u-skeleton-circle">
					<navigator hover-class="none" url="../../mine/mine/mine">
						<image src="../../static/images/icon_mine.png" mode="widthFix"></image>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 领养中心 -->
		<!-- <uni-transition :mode-class="['zoom-in','slide-bottom','fade']" :show="isBuyChickenMadal" @change="change"> -->
		<Adopt v-if="isBuyChickenMadal" @showChickenMadal="showChickenMadal" :chickenList="groupList"></Adopt>
		<!-- </uni-transition> -->
		<!-- 领取饲料 -->
		<receive-center v-if='isReceiveCenter' @showReceiveCenterMadal="showReceiveCenterMadal"></receive-center>
		<delivery-center v-if="isDeliveryCenter" @showDeliverCenter="showDeliverCenter"></delivery-center>
		<!-- 购买小鸡 -->
		<buy-chick-madal v-if="isBuyChickMadal" @showBuyChickMadal="showBuyChickMadal"></buy-chick-madal>
		<!-- 复活小鸡 -->
		<revival-chick-madal v-if="isRevivalChickMadal" @showRevivalChickMadal="showRevivalChickMadal"></revival-chick-madal>
		<wx-login-madal v-if="isAuthorization"></wx-login-madal>
		<!-- 右边栏 -->
		<right-popup :show="popup_show" @closePopup="closePopup"></right-popup>
		<!-- <wxLoginMadal></wxLoginMadal> -->
		<!-- 发团 -->
		<group-madal v-if="isGroupMadal" @toggleGroupMadal="toggleGroupMadal"></group-madal>
		<!-- 发团弹窗 -->
		<u-mask :show="sendGroupMask" @click="hideSendGroupMask">
			<view class="send-group-madal" @click.stop>
				<image src="../../static/images/icon_close@2x.png" mode="" @click="hideSendGroupMask" class="close-icon"></image>
				<view class="u-font-32 color-999999 u-margin-top-26">
					<view class="">
						<view class="" @click.stop @click="groupListShow=true">
							<u-field v-model="groupTypeLable" label="开团类型" placeholder="请选择开团类型" :disabled="true" required></u-field>
						</view>
						<view class="" @click.stop>
							<u-field v-model="groupNumber" label="人数" placeholder="请填写开团人数,如:10" required></u-field>
						</view>
					</view>
				</view>
				<view class="u-flex u-col-center u-row-around u-margin-top-60" style="width: 100%;">
					<u-button :custom-style="customStyle2" hover-class="none" @click="hideSendGroupMask">取消</u-button>
					<u-button :custom-style="customStyle3" hover-class="none" @click="sendGroup">立即发团</u-button>
				</view>
			</view>
		</u-mask>
		<u-select v-model="groupListShow" :list="groupList" @confirm="confirm" label-name="name" value-name="id"></u-select>
		<!--引用骨架屏组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>

	</view>
</template>

<script>
	import Adopt from '@/components/adopt/adopt.vue';
	import ReceiveCenter from '@/components/receiveCenter/receiveCenter.vue';
	import DeliveryCenter from '@/components/deliveryCenter/deliveryCenter.vue';
	import BuyChickMadal from "@/components/buyChickMadal/buyChickMadal.vue"
	import RevivalChickMadal from "@/components/revivalChickMadal/revivalChickMadal.vue"
	import RightPopup from "@/components/rightPopup/rightPopup.vue"
	import darkeCartsBall from '@/components/darke-cartsBall/darke-cartsBall.vue'
	import GroupMadal from '../../components/groupMadal/groupMadal.vue'
	export default {
		data() {
			return {
				loading: true,
				isBuyChickenMadal: false,
				isReceiveCenter: false,
				isDeliveryCenter: false,
				isBuyChickMadal: false,
				isRevivalChickMadal: false,
				isAuthorization: false,
				eggNum: 0, //蛋的数量
				feed: 0, //饲料
				feed_surplus_day: 0, //饲料能吃几天
				popup_show: false,
				henProgress: 0,
				isGroupMadal:false,
				groupList:[],
				groupListShow:false,
				sendGroupMask:false,
				groupNumber:"",
				groupTypeLable:'',
				chickenImg: [{
						url: require('../../static/images/chick5.png'),

						width: '67rpx',
						isTrans: true
					},
					{
						url: require('../../static/images/chick8.png'),

						width: '84rpx'
					},
					{
						url: require('../../static/images/chick6.png'),

						width: '52rpx'
					},
					{
						url: require('../../static/images/chick7.png'),

						width: '52rpx'
					},
					{
						url: require('../../static/images/chick6.png'),

						width: '52rpx'
					},
					{
						url: require('../../static/images/chick8_egg.png'),

						width: '80rpx',
						isProgress: true
					},
					{
						url: require('../../static/images/chick5.png'),

						width: '70rpx'
					},
					{
						url: require('../../static/images/chick6.png'),

						width: '52rpx'
					}
				],
				eggImg: [{
						top: 0,
						left: '22rpx'
					},
					{
						top: '26rpx',
						left: '22rpx'
					},
					{
						top: 0,
						left: '54rpx'
					},
					{
						top: '26rpx',
						left: '54rpx'
					},
					{
						top: 0,
						left: '84rpx'
					},
					{
						top: '26rpx',
						left: '84rpx'
					},
					{
						top: 0,
						left: '116rpx'
					},
					{
						top: '26rpx',
						left: '116rpx'
					},
					{
						top: '0',
						left: '146rpx'
					},
					{
						top: '26rpx',
						left: '146rpx'
					}
				],
				customStyle2: {
					width: "200rpx",
					height: "70rpx",
					background: "rgba(189,189,189,1)",
					border: "4rpx solid rgba(149,149,149,1)",
					borderRadius: "20rpx",
				},
				customStyle3: {
					width: "200rpx",
					height: "70rpx",
					background: "rgba(245,179,64,1)",
					border: "4rpx solid rgba(204,126,43,1)",
					borderRadius: "20rpx",
					color: "#FFFFFF"
				}
			};
		},
		onLoad() {
			setTimeout(() => {
				this.loading = false;
			}, 1000);
			this.$u.mpShare.path = `/pages/index/index?member_id=${this.vuex_user.id}`
			console.log(this.vuex_shareid)
			// setTimeout(() => {
			// 	this.countNum = 1000;
			// 	this.$u.vuex('vuex_version', '2.0.0.1');
			// 	// 修改对象的形式，中间用"."分隔
			// 	this.$u.vuex('vuex_user.name', '使用uView简化的vuex');
			// 	this.$u.vuex('vuex_token', 'ukdpakdidhdsa5465465');
			// }, 2000);
			// let params = {
			// 	ie: 'utf-8',
			// };

			// this.$u.api.getSearch(params).then(res => {
			// 	console.log(res);
			// });
			// // 调用getInfo接口
			// this.$u.api.getInfo({ id: 3 }).then(res => {
			// 	console.log(res);
			// });
			this.getDeliveryType()
		},
		onShow() {
			this.checkWXAuthorization()
			console.log(this.isAuthorization)
			// 判断是否登录，获取用户信息
			if (this.vuex_token !== '') {
				this.$getMemberInfo(this.vuex_user.uuid).then(res => {
					console.log(res)
					if (res.errno === "000") {
						this.eggNum = Number(res.result.data.egg)
						this.feed = Number(res.result.data.feed)
						this.feed_surplus_day = Number(res.result.data.feed_surplus_day)
						this.$u.vuex("vuex_is_farmer", Number(res.result.data.is_farmer))
						if (Number(res.result.data.has_dead_cheicken) > 0) {
							this.getReviveNum()
						}
					}
				}).catch(err => {
					console.log(err)
				})
				this.getProgress()
				this.getGoodsList(3)
			}
		},
		onReady() {
			
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.groupType = e[0].value
				this.groupTypeLable = e[0].label
			},
			showSendGroupModal(){
				if(!this.vuex_is_farmer){
					this.toggleGroupMadal()
					return false
				}
				this.showChickenMadal()
				// this.sendGroupMask = true
			},
			toggleGroupMadal() {
				this.isGroupMadal = !this.isGroupMadal
			},
			hideSendGroupMask(){
				this.sendGroupMask = false;
				this.groupNumber="";
				this.groupTypeLable=''
			},
			sendGroup() {
				let reg = /^[1-9]\d*$/
				if (this.groupType === "") {
					this.$u.toast("请选择开团类型！")
					return false
				}
				if (!reg.test(this.groupNumber) && Number(this.groupNumber)<2) {
					this.$u.toast("请输入大于2的整数")
					return false
				}
				uni.showLoading({
					mask: true
				})
				this.postSendGroup();
			},
			postSendGroup() {
				let params = {
					goods_id: this.groupType,
					num: this.groupNumber
				}
				this.$u.api.sendCollages(params).then(res => {
					uni.hideLoading()
					if (res.errno === "000") {
						this.hideSendGroupMask()
						this.$u.toast(res.errmsg)
						uni.navigateTo({
							url:"../../buychicken/goodsdetail/goodsdetail?goods_id="+res.result.data.id,
						})
					} else {
						this.$u.toast(res.errmsg)
					}
			
				}).catch(err => {
					console.log(err)
				})
			},
			getGoodsList(type) {
				// *type = 要获取的商品类别(1可参团列表2可开团列表)
				let params = {
					type:type
				}
				this.$u.api.getGoodsType(params).then(res => {
					uni.hideLoading()
					if(res.errno === "000"){
						this.groupList = res.result.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			showChickenMadal() {
				this.isBuyChickenMadal = !this.isBuyChickenMadal;
			},
			showReceiveCenterMadal() {
				this.isReceiveCenter = !this.isReceiveCenter;
			},
			showDeliverCenter() {
				this.isDeliveryCenter = !this.isDeliveryCenter
			},
			showBuyChickMadal() {
				this.isBuyChickMadal = !this.isBuyChickMadal
			},
			showRevivalChickMadal() {
				this.isRevivalChickMadal = !this.isRevivalChickMadal
			},
			closePopup() {
				this.popup_show = false
			},
			change() {},
			getReviveNum() {
				let params = {
					timestamp: Number(new Date())
				}
				this.$u.api.getReviveNum(params).then(res => {
					if (res.errno === "000") {
						this.$u.vuex("vuex_revive_num", Number(res.result.num))
						this.isRevivalChickMadal = !Number(res.result.num) ? false : true
					}
				}).catch(err => {
					console.log(err);
				})
			},
			checkWXAuthorization() {
				// console.log(this.$u.vuex('vuex_version'))
				if (!this.vuex_token) {
					this.isAuthorization = true
				} else {
					this.isAuthorization = false
				}
			},
			navigatorToPages(e) {
				if (!this.vuex_token) {
					this.$u.toast('请先登录')
					// uni.showModal({
					// 	content:"您还未授权登录/注册！",
					// 	confirmText:"立即登录"
					// })
					return false
				}
				uni.navigateTo({
					url: "../../farm/feedlog/feedlog"
				})
				console.log(e)
			},
			getProgress() {
				let params = {
					timestamp: Number(new Date())
				}
				this.$u.api.getLayingHenProgress(params).then(res => {
					if (res.errno === "000") {
						this.henProgress = res.result.current_progress
					}
				}).catch(err => {
					console.log(err);
				})
			},
			Charge({
				detail
			}, index) {

				if (index !== 5) {
					return false
				}
				if (this.henProgress != "100") {
					return false
				}
				uni.showLoading({
					mask: true,
					title: "鸡蛋收取中"
				})
				let params = {
					timestamp: Number(new Date())
				}
				this.$u.api.postCharge(params).then(res => {
					uni.hideLoading()
					if (res.errno === "000") {
						this.$refs.cartsBall.drop(detail)
					} else {
						this.$u.toast(err.errmsg)
					}
				}).catch(err => {
					console.log(err);
				})
			},
			getDeliveryType(){
				let params = {
					timestamp:Number(new Date())
				}
				this.$u.api.getDeliveryType(params).then(res => {
					if (res.errno === "000") {
						this.$u.vuex("vuex_delivery_type",res.result.data)
					}
				}).catch(err => {
					console.log(err);
				})
			},
		},
		components: {
			// Ubadge
			Adopt,
			ReceiveCenter,
			DeliveryCenter,
			BuyChickMadal,
			RevivalChickMadal,
			RightPopup,
			darkeCartsBall,
			GroupMadal
		}
	};
</script>

<style>
	page {
		height: 100%;
	}
</style>
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		position: relative;
		/* overflow: hidden; */
	}

	.bg {
		width: 100%;
		height: 100%;
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
	}

	.home {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		padding-top: 158rpx;
		box-sizing: border-box;
	}

	.home_top {
		width: 100%;
		position: absolute;
		top: 158rpx;
		padding: 0 28rpx;
	}

	.egg_box {
		width: 191rpx;
		height: 88rpx;
		position: relative;
	}

	.egg_box image {
		width: 100%;
		height: 100%;
		/* margin-top: 22rpx; */
	}

	.egg_item {
		width: 26rpx;
		height: 24rpx;
		position: absolute;
	}

	.top_tabs {
		width: 116rpx;
		height: 116rpx;
		margin-bottom: 26rpx;
	}

	.top_tabs image {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.buy_image {
		width: 164rpx;
		height: 196rpx;
		margin-top: 82rpx;
		padding-left: 34rpx;
	}

	.buy_image image {
		width: 100%;
		height: 100%;
	}

	.chicken {
		width: 100%;
		margin-top: 328rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 9;
	}

	.chicken-item {
		position: absolute;
	}

	.hand {
		width: 66rpx;
		height: 58rpx;
		position: absolute;
		top: 50rpx;
		left: 40rpx;
		animation: fingerHandle 1s ease infinite both;
	}

	.hand image {
		width: 100%;
		height: 100%;
	}

	@keyframes fingerHandle {
		0% {
			transform: none;
		}

		70% {
			transform: scale3d(0.8, 0.8, 0.8);
		}

		100% {
			transform: none;
		}
	}

	.progress-parnt {
		width: 50rpx;
		height: 6rpx;
		position: absolute;
		top: -24rpx;
		left: 48rpx;
	}

	.bottom-tabs {
		width: 100%;
		position: absolute;
		bottom: 40rpx;
	}

	.bottom-tabs-item {
		width: 108rpx;
		height: 116rpx;
	}

	.bottom-tabs-item image {
		width: 100%;
		height: 100%;
	}

	.tans-180 {
		transform: rotateY(180deg);
	}

	.tips {
		position: absolute;
		right: 0;
		bottom: 198rpx;
		min-width: 292rpx;
		height: 100rpx;
		padding: 0 16rpx 0 35rpx;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0.3);
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.tips text {
		font-size: 32rpx;
		color: #f75f53;
	}

	.chicken-item-position-1 {
		top: 0;
		left: 396rpx;
	}

	.chicken-item-position-2 {
		top: 0;
		left: 156rpx;
	}

	.chicken-item-position-3 {
		top: 138rpx;
		left: 66rpx;
		-webkit-animation-name: shake; 
		    animation-name: shake; 
	}

	.chicken-item-position-4 {
		top: 200rpx;
		left: 322rpx;
	}

	.chicken-item-position-5 {
		top: 230rpx;
		left: 520rpx;
	}

	.chicken-item-position-6 {
		top: 278rpx;
		left: 182rpx;
	}

	.chicken-item-position-7 {
		top: 264rpx;
		left: 640rpx;
	}

	.chicken-item-position-8 {
		top: 328rpx;
		left: 578rpx;
	}

	.animated { 
	    -webkit-animation-duration: 20s; 
	    animation-duration: 20s; 
	    -webkit-animation-fill-mode: both; 
	    animation-fill-mode: both; 
	    -webkit-animation-timing-function: linear; 
	    animation-timing-function: linear; 
	    animation-iteration-count:infinite; 
	    -webkit-animation-iteration-count:infinite; 
	} 
	
	@-webkit-keyframes shake { 
	    0%, 100% {-webkit-transform: translateX(0);} 
	    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-120rpx);}  
	    20%, 40%, 60%, 80% {-webkit-transform: translateX(120rpx);} 
		/* 10%, 30%, 50%, 70%, 90%{transform:rotateY(-45deg)} */
	} 
	@keyframes shake { 
	    0%, 100% {transform: translateX(0);} 
	    10%, 30%, 50%, 70%, 90% {transform: translateX(-120rpx);} 
	    20%, 40%, 60%, 80% {transform: translateX(120rpx);} 
		/* 10%, 30%, 50%, 70%, 90%{transform:rotateY(-45deg)} */
	} 
	
	.send-group-madal {
		width: 580rpx;
		height: 520rpx;
		background: rgba(255, 255, 255, 1);
		border: 4rpx solid rgba(167, 92, 26, 1);
		border-radius: 20rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		overflow: hidden;
		text-align: center;
		padding-top: 52rpx;
		box-sizing: border-box;
	}
	
	.close-icon {
		width: 148rpx;
		height: 140rpx;
		position: absolute;
		right: -68rpx;
		top: -60rpx;
	}
</style>
